<template>
	<view style="background-color:#F7F7F7 ;">
		<view class="device-list">
			<view class="top-box">
				<view class="input-search">
					<input type="text" placeholder="搜索设备编号" v-model="keywords" />
					<image src="../../static/images/home/切片@2x.png" @click="getDataList"></image>
				</view>
				<view class="select-box">
					<view class="select-flex">
						<uni-data-select type="line" v-model="type" :localdata="selectList"
							@change="onChange"></uni-data-select>
					</view>
					<view class="select-flex">
						<uni-data-select type="line" v-model="yj_status" :localdata="selectListStatus"
							@change="onChangeStatus"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="device-list-box" v-if="datalist && datalist.length > 0">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">
							编号：{{ item.name }}
						</view>
						<view class="item-top-right">
							<view class="progress-box">
								<progress style="height:12px; width:26px;border: 1px solid #25AB64;border-radius:3px"
									:percent="item.ele" stroke-width="10" activeColor="#25AB64" backgroundColor="none"
									v-if="item.ele>50" />
								<progress style="height:12px; width:26px;border: 1px solid #FF950A;border-radius:3px"
									:percent="item.ele" stroke-width="10" activeColor="#FF950A" backgroundColor="none"
									v-else />
							</view>
							<text :style="item.ele>50?'color:#25AB64;':'color:#FF950A;'">{{item.ele }}%</text>
						</view>
					</view>
					<view>
						<text class="status">{{ getDeviceStatus(item.type) }}</text>
						<text class="status">{{ getDeviceYJStatus(item.yj_status) }}</text>
					</view>
					<view class="deviceContent">
						<image src="../../static/images/home/332325341备份 3@2x.png"></image>
						<view class="item-info">
							<view class="t0">
								{{ item.ground?.name }}
							</view>
							<view class="t1">
								心跳时间：
								{{timestampToTime(item.panttime)}}
							</view>
							<view class="t2">启用状态：{{ item.status == 'normal' ? '启用' : '禁用' }}</view>
						</view>
					</view>
					<!-- <view class="deviceBottom">
						<view class="bottom-left" ></view>
						<view class="bottom-right" @click="showQRCode(item)">
							<text>点击扫码</text>
							<image src="../../static/images/home/形状@2x.png" mode=""></image>
						</view>
					</view> -->
				</view>
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
		</view>
		<view class="device-Using" v-if="isshowUsing">
			<view class="using-box">
				<view class="t0">设备二维码</view>
				<view class="t1">
					<uv-qrcode ref="qrcode" :value="deviceCode" :options="qrcode" class="image"></uv-qrcode>
				</view>
				<view class="info">
					<view class="info-t0">长按识别二维码</view>
					<view class="info-t1">{{device.name}}</view>
					<view class="info-t2">所属场地：{{device.ground?.name}}</view>
				</view>
			</view>
			<view class="close" @click="this.isshowUsing = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js';
	export default {
		data() {
			return {
				keywords: '',
				type: '',
				isshowUsing: false,
				selectList: [{
						value: '',
						text: '全部设备',
						isDefault: false
					},
					{
						value: 'online',
						text: '在线',
						isDefault: true
					},
					{
						value: 'offline',
						text: '离线',
						isDefault: false
					},
				],
				yj_status: '',
				selectListStatus: [{
						value: '',
						text: '全部',
						isDefault: false
					}, {
						value: '0',
						text: '正常',
						isDefault: false
					},
					{
						value: '1',
						text: '水位过低预警',
						isDefault: true
					},
					{
						value: '2',
						text: '电压过低预警',
						isDefault: false
					},
					{
						value: '3',
						text: '故障',
						isDefault: false
					}
				],
				areaId: null,
				datalist: [],
				currentObj: {},
				qrcode: {
					size: 300,
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 2,
					areaColor: "#000000",
					backgroundColor: "#ffffff",
				},
				userinfo: null,
				deviceCode: null,
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.areaId = options.id
			}
			if (options && options.type_status) {
				if (options.type_status == 'online' || options.type_status == 'offline') {
					this.type = options.type_status;
				}
				if (options.type_status == 'all_faults') {
					this.yj_status = '3';
				}
			}
		},
		onShow() {
			this.getDataList();
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.userinfo = res.data.userinfo;
				});
			},
			timestampToTime(timestamp) {
				let date = new Date(timestamp * 1000);
				let year = date.getFullYear();
				let month = ("0" + (date.getMonth() + 1)).slice(-2);
				let day = ("0" + date.getDate()).slice(-2);
				let hour = ("0" + date.getHours()).slice(-2);
				let minute = ("0" + date.getMinutes()).slice(-2);
				let second = ("0" + date.getSeconds()).slice(-2);
				let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
				return formattedTime;
			},
			/**
			 * 设备列表 todo
			 */
			getDataList() {
				let params = {
					type: this.type,
					yj_status: this.yj_status,
					keywords: this.keywords,
					ground_id: this.areaId
				};
				api.getDeviceList(params).then(res => {
					this.datalist = res.data;
				});
			},
	
			/**
			 * 设备状态
			 */
			getDeviceStatus(type) {
				if (type == 'online') {
					return '在线';
				} else if (type == 'offline') {
					return '离线';
				} else {
					return '未知';
				}
			},
			/**
			 * 设备状态
			 */
			getDeviceYJStatus(type) {
				if (type == '0') {
					return '正常';
				} else if (type == '1') {
					return '水位过低预警';
				} else if (type == '2') {
					return '电压过低预警';
				} else if (type == '3') {
					return '所有故障';
				} else {
					return '未知';
				}
			},
			onChange(event) {
				console.log('选中的值：' + this.type);
				this.getDataList();
			},
			onChangeStatus(event) {
				console.log('选中的值：' + this.yj_status);
				this.getDataList();
			},
			showQRCode(dev) {
				this.device = dev
				this.deviceCode = "https://d-paopao.bigchun.com?sn=" + dev.name
				this.isshowUsing = true
			
			},

		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-select__input-box {
		.uni-select__input-placeholder {
			color: #ffffff !important;
			font-size: 28rpx;
		}
	
		.uni-select__input-text {
			color: #ffffff !important;
			font-size: 28rpx;
		}
	
		.uniui-bottom::before {
			color: #ffffff;
		}
	}
	.device-list {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.input-search {
				position: relative;

				uni-input {
					background: #ffffff;
					box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					margin-right: 40rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.device-list-box {
			.status {
				background: #49a1fd;
				border-radius: 4rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #ffffff;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
				padding: 0 6rpx;
				margin-right: 18rpx;
			}

			.device-list-item {
				background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				border-radius: 14px;
				position: relative;
				margin: 0 -20rpx 20rpx;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-top-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
						display: flex;
						align-items: center;


					}

					.item-top-right {
						display: flex;
						align-items: center;

						.icon-power {
							width: 50rpx;
							height: 28rpx;
						}

						.icon-tip {
							width: 28rpx;
							height: 28rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #25ab64;
							line-height: 40rpx;
							font-style: normal;
							margin: 0 12rpx;
						}
					}
				}

				.deviceContent {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					uni-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.item-info {
						.t0 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #413100;
							line-height: 40rpx;
							font-style: normal;
						}

						.t1 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}

						.t2 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}
					}
				}

				.deviceBottom {
					border-bottom: 2rpx solid rgba(73, 161, 253, 0.2);
					padding-bottom: 16rpx;
					padding-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}

					.bottom-right {
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
						box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
						border-radius: 44rpx;
						padding: 4rpx 16rpx;

						uni-image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 6rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #ffffff;
							line-height: 36rpx;
							font-style: normal;
						}
					}
				}

				.btns {
					display: flex;
					justify-content: end;
					margin-top: 20rpx;

					uni-button {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						padding: 8rpx;
						border-radius: 8rpx;
						margin: 0 0 0 20rpx;

						&.btn-blue {
							background: #49a1fd;
						}

						&.btn-green {
							background: #25ab64;
						}

						&.btn-yellow {
							background: #ff950a;
						}

						&.btn-red {
							background: #f95452;
						}
					}
				}
			}
		}

		.empty-box {
			margin: 0 -10px;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 50rpx;
				display: block;
			}
		}
	}

	.device-Using {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.using-box {
			background: url('../../static/images/home/scan-bg.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 34rpx;

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 44rpx;
				color: #000000;
				line-height: 60rpx;
				font-style: normal;
				padding-top: 40rpx;
			}

			.t1 {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 12rpx;
				margin: 50rpx auto 40rpx;
				width: 200px;
				height: 200px;

				.image {
					width: 200px !important;
					height: 200px !important;
				}

				uni-canvas {
					width: 200px !important;
					height: 200px !important;
				}
			}

			.info {
				.info-t0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 24rpx;
				}

				.info-t1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 18rpx;
				}

				.info-t2 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
				}
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
</style>